<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view slot='top'>
				<u-tabs ref="tabs" :current="tabsCurrent" :list="list" active-color="#ff4273" :is-scroll="false"
					@change="tabsChange"></u-tabs>
			</view>
			<showItem :list='dataList'></showItem>
		</z-paging>
		<fixed-btn></fixed-btn>
	</view>
</template>
<script>
	import showItem from '@/components/showItem'
	import fixedBtn from '@/components/fixedBtn.vue'
	export default {
		components: {
			showItem,
			fixedBtn
		},
		data() {
			return {
				swiperCurrent: 0,
				dataList: [],
				tabsCurrent: 0,
				list: [{
					name: '热门'
				}, {
					name: '征友'
				}, {
					name: '自拍照'
				}, {
					name: '附近'
				}],
				request: {

					queryList: function() {
						return Promise.resolve([{
							img: 'https://www.auok.ltd/background.jpg'
						}, {
							img: 'https://www.auok.ltd/avatar.jpg'
						}, {}])
					}
				}
			};
		},
		methods: {

			tabsChange(index) {
				this.tabsCurrent = index;
				//切换tab加载对应类型的列表数据
				this.$refs.paging.reload(true)
			},

			queryList(pageNo, pageSize) {
				// console.log(pageNo, pageSize, this.request, this.dataList)
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging

				this.request.queryList({
					pageNo,
					pageSize
				}).then(res => {
					console.log(res)
					let arr = []
					for (let a = 0; a < 2; a++) {
						arr = arr.concat(res)
					}
					//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
					this.$refs.paging.complete(arr);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			}
		},
	};
</script>
<style scoped lang="scss">
	// .swiper-item {
	// 	height: 100%;
	// }

	// .wrap {
	// 	display: flex;
	// 	flex-direction: column;
	// 	height: calc(100vh - var(--window-top));
	// 	width: 100%;
	// }
</style>
